<template>
  <div class="page">
    <div class="box">
      <div class="box-page" :style="front.style">
        <div class="box-front">测试页面正面</div>
      </div>
      <div class="box-page" :style="back.style">
        <div class="box-back">测试页面背面</div>
      </div>
    </div>
  </div>
  <div>
    <button @click="step1">操作1</button>
    <button @click="step2">操作2</button>
  </div>
</template>
<script>
import { mat4, vec3 } from '../../libs/glmatrix/gl-matrix-min.js'
export default {
  data() {
    return {
      front: {},
      back: {},
      w: 100,
      h: 100
    }
  },
  methods: {
    buildStyle(obj) {
      let { m } = obj
      let end = mat4.create()
      m.forEach((res) => {
        mat4.mul(end, end, res)
      })
      let transform = `matrix3d(${end.join(',')})`
      let clip = {}
      if (obj.clip) clip = this.buildClipStyle(obj.clip)

      obj.style = {
        transform,
        ...clip
      }
    },
    initFront() {
      let { w, h } = this
      this.front.m = []
      let m = mat4.create()
      mat4.translate(m, m, [w / 2, 0, 1])
      this.front.m.push(m)
      this.buildStyle(this.front)
    },
    initBack() {
      let { w, h } = this
      this.back.m = []
      let m = mat4.create()
      mat4.translate(m, m, [w / 2, 0, 0])
      this.back.m.push(m)
      this.buildStyle(this.back)
    },
    step1() {
      let { w, h } = this
      let { lt, lb, rt, rb } = this.corrds
      let direction = 0
      let s = [w / 2, 0, 0]
      let e = [w, -h / 2, 0]
      let center = [(s[0] + e[0]) / 2, (s[1] + e[1]) / 2, 0]
      let [x, y] = center
      let k1 = (e[1] - s[1]) / (e[0] - s[0])
      let k2 = -1 / k1
      let b = y - k2 * center[0]
      let k2line_y = (x) => {
        return k2 * x + b
      }
      let k2line_x = (y) => {
        return (y - b) / k2
      }

      console.log(k1, b)
      //几个交点
      let m_top = this.originPoint([k2line_x(-h / 2), -h / 2, 0], direction)
      let m_right = this.originPoint([w, k2line_y(w), 0], direction)
      let m_left = this.originPoint([0, k2line_y(0), 0], direction)
      let m_bottom = this.originPoint([k2line_x(h / 2), h / 2, 0], direction)

      console.log('top', m_top, 'right', m_right, 'left', m_left, 'bottom', m_bottom)

      let clip_front = [m_top, m_right, rb, lb, lt]
      let clip_back = [m_top, rt, m_right]

      console.log(`clip_front`, clip_front)

      this.front.clip = clip_front
      this.back.clip = clip_back
      this.buildStyle(this.front)
      this.buildStyle(this.back)
    },
    originPoint(p, direction) {
      if (direction == 0) {
        let mat = this.front.m[0]
        let invert_mat = mat4.create()
        mat4.invert(invert_mat, mat)
        let v2 = vec3.create()
        vec3.transformMat4(v2, p, invert_mat)
        return v2
      }
    },
    buildClipStyle(clip) {
      let { w, h } = this
      let str = clip
        .map((res) => {
          let [x, y] = res
          return [x + w / 2, y + h / 2]
        })
        .map((res) => {
          let [x, y] = res
          return x + 'px' + ' ' + y + 'px'
        })
        .join(',')
      let style = {
        'clip-path': `polygon(${str})`
      }
      return style
    },
    step2() {},
    initCorrds() {
      let { w, h } = this
      this.corrds = {
        lt: [-w / 2, -h / 2, 0],
        lb: [-w / 2, h / 2, 0],
        rt: [w / 2, -h / 2, 0],
        rb: [w / 2, h / 2, 0]
      }
    }
  },
  mounted() {
    this.initCorrds()
    this.initFront()
    this.initBack()
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
  transform-style: preserve-3d;
  margin: 100px auto;
  &-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
  &-front {
    background: grey;
    width: 100px;
    height: 100px;
  }
  &-back {
    background: #646495;
    width: 100px;
    height: 100px;
  }
}
</style>
